<!-- List.vue的布局 -->
<template>
  <!-- <div>
    <div class="item">
      <h3 class="header">这是一个标题，可能有点长，是的，特别特别长的那种</h3>
      <p class="content">
        这是一些文本的内容啊内容，这是一些文本的内容啊内容，这是一些文本的内容啊内容，这是一些文本的内容啊内容
      </p>
    </div>
    <div class="item">
      <h3 class="header">这是一个标题，可能有点长，是的，特别特别长的那种</h3>
      <p class="content">
        这是一些文本的内容啊内容，这是一些文本的内容啊内容，这是一些文本的内容啊内容，这是一些文本的内容啊内容
      </p>
    </div>
  </div> -->
  <div>
    <div class="item" v-for="item in datas" :key="item.ID">
      <h3 class="header">{{ item.title }}</h3>
      <p class="content">{{ item.content }}</p>
    </div>
  </div>
</template>
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    //在这里我们先做一个静态数据，调好了再读服务器的
    const datas = [
      {
        ID: 1,
        title: '深夜突发！多个航班无法降落，疑因有不明飞行器活动',
        content:
          '记者从民航爱好者常使用的一款飞机轨迹查询软件看到，4日晚的确有多趟航班在抵达杭州萧山国际机场前在空中进行了盘旋等待，或备降到了周边的宁波栎社国际机场。'
      },
      {
        ID: 2,
        title: '湖州长兴有家公司破产资产2亿元起拍，背后有一个“最快跌落的中国首富”的身影',
        content:
          '是的，“汉能”，“汉能薄膜”在2013年和2014年间曾经是港股里最看不懂的“妖股”，而它的创始人李河君在2015年3月以1600亿的身家荣登中国首富，不过仅仅3个月，其身家就暴跌1000亿，被称为最快跌落的首富。'
      },
      {
        ID: 1,
        title: '深夜突发！多个航班无法降落，疑因有不明飞行器活动',
        content:
          '记者从民航爱好者常使用的一款飞机轨迹查询软件看到，4日晚的确有多趟航班在抵达杭州萧山国际机场前在空中进行了盘旋等待，或备降到了周边的宁波栎社国际机场。'
      },
      {
        ID: 2,
        title: '湖州长兴有家公司破产资产2亿元起拍，背后有一个“最快跌落的中国首富”的身影',
        content:
          '是的，“汉能”，“汉能薄膜”在2013年和2014年间曾经是港股里最看不懂的“妖股”，而它的创始人李河君在2015年3月以1600亿的身家荣登中国首富，不过仅仅3个月，其身家就暴跌1000亿，被称为最快跌落的首富。'
      },
      {
        ID: 1,
        title: '深夜突发！多个航班无法降落，疑因有不明飞行器活动',
        content:
          '记者从民航爱好者常使用的一款飞机轨迹查询软件看到，4日晚的确有多趟航班在抵达杭州萧山国际机场前在空中进行了盘旋等待，或备降到了周边的宁波栎社国际机场。'
      },
      {
        ID: 2,
        title: '湖州长兴有家公司破产资产2亿元起拍，背后有一个“最快跌落的中国首富”的身影',
        content:
          '是的，“汉能”，“汉能薄膜”在2013年和2014年间曾经是港股里最看不懂的“妖股”，而它的创始人李河君在2015年3月以1600亿的身家荣登中国首富，不过仅仅3个月，其身家就暴跌1000亿，被称为最快跌落的首富。'
      },
      {
        ID: 1,
        title: '深夜突发！多个航班无法降落，疑因有不明飞行器活动',
        content:
          '记者从民航爱好者常使用的一款飞机轨迹查询软件看到，4日晚的确有多趟航班在抵达杭州萧山国际机场前在空中进行了盘旋等待，或备降到了周边的宁波栎社国际机场。'
      },
      {
        ID: 2,
        title: '湖州长兴有家公司破产资产2亿元起拍，背后有一个“最快跌落的中国首富”的身影',
        content:
          '是的，“汉能”，“汉能薄膜”在2013年和2014年间曾经是港股里最看不懂的“妖股”，而它的创始人李河君在2015年3月以1600亿的身家荣登中国首富，不过仅仅3个月，其身家就暴跌1000亿，被称为最快跌落的首富。'
      }
    ];

    return {
      datas //返回出去，以便在template里使用
    };
  }
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
} /* scoped-局部样式 */
.item {
  box-sizing: border-box;
  width: 350px;
  height: 180px;
  padding: 20px 20px;
  background: #fff;
  border: 1px solid #ccc;
  margin-bottom: -1px; /* 上下边框合并一下 */
}
.header {
  /* margin-bottom: 20px; */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 30px;
}
.content {
  color: #999;
  font-size: 14px;
  line-height: 26px;
  height: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}
</style>
